<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="showChatBox"
    :width="dialogWidth"
    :center="false"
    :modal-append-to-body="false"
    @close="closeChatBox"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
  >
    <!-- 聊天消息展示区域 -->
    <div class="chat-messages" ref="chatContainer">
      <div
        v-for="message in messages"
        :key="message.id"
        class="chat-message"
      >
        <div v-if="message.from === 'user'" class="user-message">
          <div class="text">{{ message.text }}</div>
          <div class="arrow"></div>
          <img class="avatar" src="user_avatar_url" alt="User Avatar">
        </div>
        <div v-else class="robot-message">
          <img class="avatar" src="robot_avatar_url" alt="Robot Avatar">
          <div class="text">{{ message.text }}</div>
          <div class="arrow"></div>
        </div>
      </div>
    </div>

    <!-- 用户输入框和发送按钮 -->
    <div class="chat-input">
      <el-input v-model="inputMessage" placeholder="Type your message..." @keyup.enter="sendMessage">
        <template slot="append">
          <el-button @click="sendMessage" type="primary">Send</el-button>
        </template>
      </el-input>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      showChatBox: true,
      inputMessage: '',
      messages: [
        { id: 1, text: 'Hi there!', from: 'robot' } // 初始机器人消息
      ]  // 存储聊天消息
    };
  },
  computed: {
    dialogTitle() {
      return this.showChatBox ? '电影知识问答框' : '';
    },
    dialogWidth() {
      return this.showChatBox ? '800px' : '';
    }
  },
  methods: {
    closeChatBox() {
      this.showChatBox = false;
    },
    sendMessage() {
      if (this.inputMessage.trim() === '') return;
      
      // 发送用户消息
      const userMessage = { id: this.messages.length + 1, text: this.inputMessage, from: 'user' };
      this.messages.push(userMessage);
      this.inputMessage = '';

      // 模拟后台回复
      setTimeout(() => {
        const robotReply = { id: this.messages.length + 1, text: 'I received your message!', from: 'robot' };
        this.messages.push(robotReply);
        this.scrollToBottom(); // 发送完消息后滚动到底部
      }, 500);
    },
    scrollToBottom() {
      // 等待 Vue 更新视图后再滚动到底部
      this.$nextTick(() => {
        const container = this.$refs.chatContainer;
        container.scrollTop = container.scrollHeight;
      });
    }
  }
};
</script>
<style scoped>
/* 样式可以根据需求自行调整 */
.chat-messages {
  height: 300px; /* 调整为您想要的高度 */
  overflow-y: auto;
  overflow-x: hidden; /* 禁止横向滚动条 */
}

.chat-message {
  position: relative;
  margin-bottom: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-message {
  align-self: flex-end;
  text-align: right;
}

.robot-message {
  align-self: flex-start;
}

.text {
  padding: 10px;
  border-radius: 10px;
  max-width: 70%;
}

.arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.user-message .arrow {
  right: -10px;
  top: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #eaf6fd; /* 用户消息箭头颜色 */
}

.robot-message .arrow {
  left: -10px;
  top: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f4f4f4; /* 机器人消息箭头颜色 */
}

.chat-input {
  margin-top: 20px;
}

.el-dialog__header {
  border-bottom: none;
  padding: 10px 20px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  border-top: none;
  text-align: right;
  padding: 10px 20px;
}
</style>